<template>
  <div class="month-detail">
    <div class="search-header">
      <el-form :model="searchForm" ref="searchForm" inline size="mini">
        <el-form-item prop="name" label="姓名">
          <el-input v-model="searchForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item prop="idCard" label="身份证号">
          <el-input v-model="searchForm.idCard" clearable></el-input>
        </el-form-item>
        <el-form-item prop="stationName" label="岗位">
          <el-select
            v-model="searchForm.stationName"
            @change="changeSearch"
            clearable
          >
            <el-option
              v-for="(v, k) in stations"
              :key="'st' + k"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="gorupName" label="组别">
          <el-select
            v-model="searchForm.groupName"
            @change="changeSearch"
            clearable
          >
            <el-option
              v-for="(v, k) in groups"
              :key="'gp' + k"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="pageInit"
            >搜索</el-button
          >
          <el-button type="default" size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-divider></el-divider> -->
    <div class="tb">
      <el-row type="flex" align="bottom">
        <el-button size="small" @click="download" icon="el-icon-download">
          导出</el-button
        >
        <span
          v-if="total > 0"
          style="font-size:12px;color:#a8a8a8;margin-left:10px"
          >共{{ total }}条记录</span
        >
      </el-row>
      <el-table
        id="download-tb"
        :data="tableDatas"
        style="margin-top:10px;overflow:hidden;overflow-y:scroll"
        height="700px"
        v-loading="loading"
      >
        <el-table-column
          v-for="(item, k) in tableHeader"
          :key="'tb' + k"
          :prop="item.columnName"
          :label="item.columnComment"
          :width="item.width"
        ></el-table-column>
      </el-table>
      <!-- <el-table
        id="download-tb"
        :data="dlData"
        style="margin-top:10px;overflow-y:scroll"
        height="500px"
      >
        <el-table-column
          v-for="(item, k) in dlHeader"
          :key="'tb' + k"
          :prop="item.columnName"
          :label="item.columnComment"
          :width="item.width"
        ></el-table-column>
      </el-table> -->
    </div>
    <!-- <pagination
      v-show="total > 10"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      :page-sizes="[10]"
      @pagination="pageInit"
    /> -->
  </div>
</template>

<script>
import {
  monthDetail,
  monthOptions
} from "@/api/job/attendance/v2/attendanceApi";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  name: "monthDetail",
  data() {
    return {
      groups: [],
      stations: [],
      dlData: [],
      dlHeader: [],
      loading: false,
      total: 0,
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        month: this.$route.query.month,
        deptId: this.$route.query.deptId
      },
      tableHeader: [
        { columnName: "areaName", columnComment: "区域", width: 80 },
        { columnName: "groupName", columnComment: "组别", width: 80 },
        { columnName: "staffName", columnComment: "姓名", width: 80 },
        { columnName: "stationName", columnComment: "岗位", width: 100 },
        { columnName: "idCard", columnComment: "身份证", width: 180 },
        { columnName: "shouldBe", columnComment: "应出勤", width: 80 },
        { columnName: "actualBe", columnComment: "实际出勤", width: 80 },
        { columnName: "crossCount", columnComment: "通班个数", width: 80 },
        { columnName: "dayCount", columnComment: "白班个数", width: 80 },
        { columnName: "nightCount", columnComment: "晚班个数", width: 80 },
        { columnName: "absenteenism", columnComment: "旷工次数", width: 80 },
        { columnName: "leaveOfEarly", columnComment: "早退次数", width: 80 },
        { columnName: "late", columnComment: "普通迟到", width: 80 },
        { columnName: "lateOfNormal", columnComment: "一般迟到", width: 80 },
        { columnName: "lateOfSeriously", columnComment: "严重迟到", width: 80 }
      ],
      tableDatas: []
    };
  },
  created() {
    this.optionsInit();
    this.pageInit();
  },
  methods: {
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        month: this.$route.query.month,
        deptId: this.$route.query.deptId
      };
      this.pageInit();
    },
    changeSearch() {
      this.searchForm.pageNum = 1;
      this.pageInit();
    },
    tableHeaderReset() {
      this.tableHeader = [
        { columnName: "areaName", columnComment: "区域", width: 80 },
        { columnName: "groupName", columnComment: "组别", width: 80 },
        { columnName: "staffName", columnComment: "姓名", width: 80 },
        { columnName: "stationName", columnComment: "岗位", width: 100 },
        { columnName: "idCard", columnComment: "身份证", width: 180 },
        { columnName: "shouldBe", columnComment: "应出勤", width: 80 },
        { columnName: "actualBe", columnComment: "实际出勤", width: 80 },
        { columnName: "crossCount", columnComment: "通班个数", width: 80 },
        { columnName: "dayCount", columnComment: "白班个数", width: 80 },
        { columnName: "nightCount", columnComment: "晚班个数", width: 80 },
        { columnName: "absenteenism", columnComment: "旷工次数", width: 80 },
        { columnName: "leaveOfEarly", columnComment: "早退次数", width: 80 },
        { columnName: "late", columnComment: "普通迟到", width: 80 },
        { columnName: "lateOfNormal", columnComment: "一般迟到", width: 80 },
        { columnName: "lateOfSeriously", columnComment: "严重迟到", width: 80 }
      ];
    },
    // 页面初始化
    pageInit() {
      const _this = this;
      this.loading = true;
      monthDetail(this.searchForm)
        .then(res => {
          _this.total = res.data.length;
          const td = res.data;
          if (td.length == 0) {
            this.loading = false;
            return;
          }
          const month = _this.$route.query.month;
          if (td[0].attendances.length > 0) {
            const tmp = [];
            _this.tableHeaderReset();
            for (let i = 0; i < td[0].attendances.length; i++) {
              if (i < 9) {
                const dt = `${month}-${"0" + (i + 1)}`;
                tmp.push({ columnName: dt, columnComment: dt, width: 110 });
              } else {
                const dt = `${month}-${i + 1}`;
                tmp.push({ columnName: dt, columnComment: dt, width: 110 });
              }
            }
            _this.tableHeader = [..._this.tableHeader, ...tmp];
          }
          td.forEach(data => {
            const attendance = data.attendances;
            let dt = undefined;
            for (let i = 0; i < attendance.length; i++) {
              if (i < 9) {
                dt = `${month}-${"0" + (i + 1)}`;
              } else {
                dt = `${month}-${i + 1}`;
              }
              data[`${dt}`] = attendance[i];
            }
          });
          _this.tableDatas = td;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /* exportMonthDatas() {
      const loading = this.$loading({
        lock: true,
        text: "下载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      downloadMonthDetail(this.searchForm)
        .then(response => {
          loading.close();
          this.download(response.msg);
        })
        .catch(() => {
          loading.close();
        });
    }, */
    download() {
      this.exportMonthDatas();
    },
    exportMonthDatas() {
      const wb = XLSX.utils.table_to_book(
        document.querySelector("#download-tb")
      );
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        book: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${this.searchForm.month}月考勤明细.xlsx`
        );
      } catch (e) {
        if (typeof console != "undefined") {
        }
      }
      return wbout;
    },
    // 选项初始化
    optionsInit() {
      monthOptions(this.searchForm).then(res => {
        this.groups = res.data.groups;
        this.stations = res.data.stations;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.month-detail {
  height: 90vh;
  padding: 20px;

  .search-header {
    height: 5%;
  }

  .tb {
    height: 800px;
    margin-top: 30px;
  }
}
</style>
